<template>
  <div class="basic-info-wrapper">
    <div class="section-item">
      <div class="section-item-content transform-top">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="未支付金额">{{ unitVal(feeDetail.unpayTotalAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="已支付金额">{{ unitVal(feeDetail.payedTotalAmount, '元') }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <a-divider :margin="16" />
    <!-- 筛选 -->
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadCompulsoryData" />
    <!-- 表格 -->
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
      <template #costDetails="{ record }">
        <div v-for="(item, index) in record.feeList" :key="item.id">
          <span
            class="td"
            style="position: relative; padding: 0"
            :class="{ 'padding-top-0': index == 0, 'border-none padding-bottom-0': index == record.feeList.length - 1 }"
            :style="{
              height: '42px',
              'line-height': '42px',
            }"
          >
            {{ item.feeName }}: {{ item.feeActiveAmount }} 元
          </span>
        </div>
      </template>
      <template #orderCode="{ record }">
        <div>{{ record.billCode }}</div>
        <div>
          <a-tag color="blue" size="small" class="mr-1">外部</a-tag>
          <span>{{ record.outBillCode }}</span>
        </div>
      </template>
      <template #payStatusSlot="{ record }">
        <div :style="{ color: styleComputed(record) }">{{ record.payStatusName }}</div>
      </template>
      <template #payTypeName="{ record }">
        {{ record.payTypeName }}
        <div v-if="record.payType == -1">{{ record.settlementBodyName }}</div>
      </template>
    </table-index>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, reactive } from 'vue'
  import { unitVal } from '@/utils'
  import { getThirdPayBill } from '@/api/common'
  import { useTable } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { useRoute } from 'vue-router'

  const props = defineProps({
    bizType: {
      type: String,
      default: '',
    },
    refId: {
      type: Number,
      default: null,
    },
    payStatus: {
      type: Number,
      default: null,
    },
  })

  const route = useRoute()
  const { params } = route
  const dict = usePageDict('thirdPaymentBillDict')
  const styleComputed = computed(() => {
    return (record: any) => {
      if (record.payStatus == 0) {
        return '#FF7D00'
      } else if (record.payStatus == 1) {
        return '#00B42A'
      } else {
        return '#86909C'
      }
    }
  })
  const feeDetail = ref({
    unpayTotalAmount: 0,
    payedTotalAmount: 0,
  })
  const queryParam = reactive<any>({
    payStatus: '',
  })
  // 查询条件
  const searchList = computed(() => {
    return [{ label: '支付状态', prop: 'payStatus', type: 'a-select', options: dict.payStatusEnum }]
  })

  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用明细', slotName: 'costDetails', width: 240, fixed: 'left' },
      { title: '结算方式', slotName: 'payTypeName', width: 150 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 100 },
      { title: '支付状态', slotName: 'payStatusSlot', width: 100 },
      { title: '账单金额', dataIndex: 'totalAmount', unit: '元', width: 130 },
      { title: '交易完成时间', dataIndex: 'finishTime', width: 180 },
      { title: '客户名称', dataIndex: 'customerName', width: 100 },
      { title: '结算备注', dataIndex: 'remark', width: 100 },
      { title: '账单号', slotName: 'orderCode', width: 240 },
      { title: '操作人', dataIndex: 'createUserName', width: 120 },
      { title: '生成时间', dataIndex: 'createTime', width: 180, fixed: 'right' },
    ],
  })

  const loadCompulsoryData = () => {
    tableCompulsory.tableLoading = true

    getThirdPayBill(queryParam)
      .then((res: any) => {
        const { result } = res
        feeDetail.value = result
        tableCompulsory.dataList = result.data
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  onMounted(() => {
    queryParam.bizType = props.bizType
    queryParam.refId = params.id

    loadCompulsoryData()
  })
</script>

<style lang="less" scoped>
  .td {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
    padding: 10px 0;
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: -16px;
      right: -16px;
      bottom: 0;
      height: 0.5px;
      background-color: #e5e6eb;
    }
  }
  .td-bottom {
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: -16px;
      right: -16px;
      bottom: 0;
      height: 0.5px;
      background-color: #e5e6eb;
    }
  }
  .padding-top-0 {
    padding-top: 0;
  }
  .padding-bottom-0 {
    padding-bottom: 0;
  }
  .border-none {
    &::before {
      content: none !important;
    }
  }
</style>
